import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import { Input, Select, Space } from "antd";
import LoginAvatar from "../LoginAvatar";
import { useNavigate } from "react-router-dom";
function PageHeader(props) {
  const [searchOption, setSearchOption] = useState("issue");
  const navigate = useNavigate();
  const handleSearch = (value) => {
    if (value) {
      navigate("/searchPage", {
        state: {
          value,
          searchOption,
        },
      });
    } else {
      navigate("/");
    }
  };

  return (
    <div className="headerContainer">
      {/* 头部 logo */}
      <div className="logoContainer">
        <div className="logo"></div>
      </div>
      {/* 头部导航 */}
      <nav className="navContainer">
        <NavLink to="/" className="navgation">
          问答
        </NavLink>
        <NavLink to="/books" className="navgation">
          书籍
        </NavLink>
        <NavLink to="/interviews" className="navgation">
          面试题
        </NavLink>
        <a href="https://www.bilibili.com/" className="navgation" target="_blank" rel="noreferrer">
          视频教程
        </a>
      </nav>
      {/* 搜索框 */}
      <div className="searchContainer">
        <Space.Compact>
          <Select
            defaultValue="issue"
            size="large"
            style={{ width: "21%" }}
            onChange={(val) => setSearchOption(val)}
          >
            <Select.Option value="issue">问答</Select.Option>
            <Select.Option value="book">书籍</Select.Option>
          </Select>
          <Input.Search
            placeholder="请输入要搜索的内容"
            allowClear
            enterButton="搜索"
            size="large"
            style={{
              width: "80%",
            }}
            onSearch={handleSearch}
          />
        </Space.Compact>
      </div>
      {/* 登录按钮 */}
      <div className="loginBtnContainer">
        <LoginAvatar showModal={props.showModal} />
      </div>
    </div>
  );
}

export default PageHeader;
